<template>
  <div>
    <x-card v-if="hasPerm('gardenhouse:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="7"
              :sm="24"
            >
              <a-form-item label="食物类型：">
                <a-select
                  v-model="queryParam.FoodMaterialsTypeId"
                  allowClear
                >
                  <a-select-option v-for="item in foodOptions" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-form-item label="搜索">
                <a-input
                  v-model="queryParam.foodName"
                  allow-clear
                  placeholder="请输入食物名称"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
        bordered
      >
        <template
          slot="operator"
          v-if="hasPerm('sysclasses:add')"
        >
          <a-button
            icon="plus"
            type="primary"
            v-if="hasPerm('sysclasses:add')"
            @click="$refs.addForm.add()"
          >新增
          </a-button>
        </template>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            v-if="hasPerm('sysclasses:edit')"
            @click="$refs.editForm.edit(record)"
          >修改</a>
        </span>
      </s-table>
      <add-form ref="addForm" @ok="handleOk" />
      <edit-form ref="editForm" @ok="handleOk" />
    </a-card>
  </div>
</template>

<script>
import { foodOptionList, foodStoreList, foodStoreQuery } from '@/api/modular/diet/dietManage'
import { STable, XCard } from '@/components'
import addForm from '@/views/diet/addForm'
import editForm from '@/views/diet/editForm'

export default {
  components: {
    STable,
    XCard,
    addForm,
    editForm
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        foodName: undefined,
        FoodMaterialsTypeId: undefined
      },
      // 表头
      columns: [
        {
          title: '食物名称',
          dataIndex: 'foodName'
        },
        {
          title: '来源',
          dataIndex: 'source'
        },
        {
          title: '食部',
          dataIndex: 'foodDepartment'
        },
        {
          title: '热量',
          dataIndex: 'heat'
        },
        {
          title: '蛋白质',
          dataIndex: 'protein'
        },
        {
          title: '脂肪',
          dataIndex: 'fat'
        },
        {
          title: '碳水化合物',
          dataIndex: 'carbohydrate'
        },
        {
          title: '视黄醇',
          dataIndex: 'retinol'
        },
        {
          title: '胡罗卜素',
          dataIndex: 'carotene'
        },
        {
          title: '钙',
          dataIndex: 'calcium'
        },
        {
          title: '铁',
          dataIndex: 'iron'
        },
        {
          title: '锌',
          dataIndex: 'zinc'
        },
        {
          title: '磷',
          dataIndex: 'phosphorus'
        },
        {
          title: '尼克酸',
          dataIndex: 'nicotinicAcid'
        },
        {
          title: 'VitA',
          dataIndex: 'vitA'
        },
        {
          title: 'VitB1',
          dataIndex: 'vitB1'
        },
        {
          title: 'VitB2',
          dataIndex: 'vitB2'
        },
        {
          title: 'VitC',
          dataIndex: 'vitC'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return foodStoreList(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.data.rows.length) {
            return res.data
          }
        })
      },
      foodOptions: [],
      form: {}
    }
  },
  created() {
    this.getFoodOption()
  },
  methods: {
    async getFoodOption() {
      const { data: data } = await foodOptionList()
      this.foodOptions = data
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    async handleQuery() {
      await foodStoreQuery()
    }
  }
}
</script>

<style>

</style>